<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">

    <meta content="width=device-width, initial-scale=1" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="IE=edge" http-equiv="X-UA-Compatible">

    <title>{{title | e }}</title>

    <link href="/assets/bulma-0.8.2/css/bulma.min.css" rel="stylesheet">
    <link href="/assets/costum.css" rel="stylesheet">
    <link href="/assets/costum.css" rel="stylesheet">
    <!--<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">-->

    <link rel="icon" href="assets/psb.jpeg">

  </head>
  <body class="body">
    <section class="hero is-black is-medium">

      <div class="hero-head">

        <nav class="navbar" role="navigation" aria-label="main navigation">
            <div class="navbar-brand">

                <a role="button" class="navbar-burger burger  has-text-success" aria-label="menu" aria-expanded="false" data-target="navbarMenu">
                      <span aria-hidden="true"></span>
                      <span aria-hidden="true"></span>
                      <span aria-hidden="true"></span>
                </a>
            </div>

            <div id="navbarMenu" class="navbar-menu">
                <div class="navbar-start">
                  <a class="navbar-item">
                    {{title}}
                  </a>

                  <div class="navbar-item has-dropdown is-hoverable">
                    <a class="navbar-link">
                      Category
                    </a>

                    <div class="navbar-dropdown">
                      {% for category in categories %}
                      <a class="navbar-item" href="{{category.url | e('js')}}">
                        {{ category.name | e }}
                      </a>
                      {% endfor %}
                    </div>
                  </div>
                </div>

              <div class="navbar-end">
                <div class="navbar-item">
                  <div class="buttons">
                    <a class="button is-black">
                      Log in
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </nav>

      </div>
      <div class="hero-body has-shadow-down">
          <div class="container has-text-centered">
            <span class="title is-size-2-desktop is-size-4-touch" style="display:inline-block;"> #></span>
            <h1 class="title is-size-2-desktop is-size-4-touch" style="display:inline-block;">{{title|e}}</h1>
            <span id="blink" class="title is-size-2-desktop is-size-4-touch" style="display:inline-block;">_</span>
            <h2 class="subtitle">{{subtitle |e }}</h2>
          </div>
      </div>



    </section>

    <section id="posts">
      <div class="container">
        <div class="columns">
          <div class="column is-two-third">
            <div class="card has-shadow-down">
              <div class="card-header has-shadow-down">
                <p class="card-header-title has-text-success is-size-5">{{category}}</p>
              </div>
              <div class="card-content">
                <div class="content has-text-light">
                  <ul>
                    {% for post in posts %}
                    <li class="post">
                      <time class="has-text-grey-light meta">{{post.time}}</time>
                      <a href="{{post.url}}">
                        <p>{{post.title}}</p>
                      </a>
                      <div style="margin-left: auto;" class="is-hidden-touch">
                          <p class="has-text-grey-light">views:{{post.views}}</p>
                      </div>
                    </li>
                    {% endfor %}
                  </ul>
                </div>
              </div>

              <div class="card-footer">

              </div>

            </div>
          </div>

          <div class="column is-one-third">
            <div class="card has-shadow-down">
              <div class="card-header has-shadow-down">
                <p class="card-header-title has-text-success is-size-5">Categories</p>
              </div>
              <div class="card-content">
                {% for category in categories %}
                <ul class="menu-list">
                    <li>
                      <a>{{category.name |e }}</a>
                    </li>
                </ul>
                {% endfor %}
              </div>

            </div>
          </div>

        </div>
      </div>
    </section>

      <section class="hero is-dark has-shadow-up" id="footer">
        <div class="hero-body">
          <div class="container has-text-centered">
            <h5 class="subtitle is-6 is-size-7-touch">Designed and developed by 休止千鹤 Copyright ©  2016-2020 restkhz.com</h6>
          </div>
      </div>
      </section>

      <script type="text/javascript" src="./assets/costum.js"></script>

    </body>
</html>
